<template>
  <div>
    <div class="title flex items-center justify-between">
      <div class="flex  items-center">
        <div class="text-[20px]">
          营收/成本分析
        </div>

      </div>

      <div class="flex">

        <div class="tab flex">
          <div class="tab-li flex-center cursor-pointer transition"
               :class="`${ activeTab1 == index ? 'active' : '' }`"
               @click="handleBtnClick({type:'tab1',index})"

               v-for="(item,index) in tab1" :key="index">
            {{ item.name }}
          </div>
        </div>


        <div class="tab flex ml-[15px]">
          <div class="tab-li flex-center cursor-pointer transition"
               :class="`${ activeTab2 == index ? 'active' : '' }`"
               @click="handleBtnClick({type:'tab2',index})"
               v-for="(item,index) in tab2" :key="index">
            {{ item.name }}
          </div>
        </div>

        <div class="tab flex ml-[15px] w-[300px]">
          <el-date-picker
            v-model="selectArr"
            type="daterange"
            format="YYYY-MM-DD"
            date-format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            @change="onChange"
          />
        </div>


      </div>


    </div>

    <div class="module mt-[20px] flex justify-between">

      <div class="w-[1186px] h-[373px]" ref="ChartRef">

      </div>
    </div>

  </div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts';
import {getAnalysisByUser, getAnalysisByTime} from "@/api/home";
import {deepCopy} from "@/utils";
import dayjs from "dayjs";
let option = {
  tooltip: {
    trigger: 'axis',
    // axisPointer: {
    //   type: 'cross',
    //   crossStyle: {
    //     color: '#999'
    //   }
    // }
  },

  grid: {
    top: '20%',
    bottom: "2%",
    left: "3%",
    right: "3%",
    containLabel: true
  },
  toolbox: {
    // feature: {
    //   dataView: { show: true, readOnly: false },
    //   magicType: { show: true, type: ['line', 'bar'] },
    //   restore: { show: true },
    //   saveAsImage: { show: true }
    // }
  },
  legend: {
    data: ['有效订单数', '广告ROI',]
  },
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '广告ROI',
      // min: 0,
      // max: 25,
      // interval: 5,
      axisLabel: {
        formatter: '{value}'
      }
    },
    {
      type: 'value',
      name: '有效订单数',
      // min: 0,
      // max: 250,
      // interval: 50,
      axisLabel: {
        formatter: '{value}'
      }
    },

  ],
  series: [
    {
      name: '有效订单数',
      type: 'bar',
      barMaxWidth: 20, // 每一个都要设置
      itemStyle: {
        normal: {
          //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
          barBorderRadius: [8, 8, 0, 0],
          color: new echarts.graphic.LinearGradient(
            0, 1, 0, 0, [{//只要修改前四个参数就ok
              offset: 0,
              color: '#8E4DFF'
            }, //柱图渐变色
              {
                offset: 1,
                color: '#3721FF'
              }
            ]
          ),
        }
      },
      tooltip: {
        valueFormatter: function (value) {
          return value + ' ml';
        }
      },
      data: [
        2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
      ]
    },
    {
      name: '广告ROI',
      type: 'line',
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value) {
          return value;
        }
      },
      smooth:true,
      itemStyle: {
        normal: {
          //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
          barBorderRadius: [8, 8, 0, 0],
          color:"#FF7700",
        }
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#FF7700' // 起始颜色
        }, {
          offset: 1,
          color: '#FFF' // 结束颜色
        }])
      },
      data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
    }
  ]
};

const modules = ref([
  {
    name: "今日数据",
    icon: "https://img.alicdn.com/imgextra/i1/801089336/O1CN019cMvUX2IpwkiVAs2s_!!801089336.png",
    bg: "#FF8800,#FFB116"
  },
  {
    name: "昨日数据",
    icon: "https://img.alicdn.com/imgextra/i3/801089336/O1CN01QXmrla2IpwkkgWwx1_!!801089336.png",
    bg: "#00C52E,#71E675"
  },
  {
    name: "本周数据",
    icon: "https://img.alicdn.com/imgextra/i2/801089336/O1CN01NIfNSe2IpwkkTzxes_!!801089336.png",
    bg: "#4C21FF,#8F50FF"
  },
  {
    name: "本月数据",
    icon: "https://img.alicdn.com/imgextra/i3/801089336/O1CN01IZUuZq2Ipwkky9GeL_!!801089336.png",
    bg: "#00D0F1,#16FFFF"
  }
])

const activeTab1 = ref(0)
const tab1 = ref([
  {
    name: "时间"
  },
  {
    name: "成员"
  }
])

const activeTab2 = ref(0)
const tab2 = ref([
  {
    name: "7天",
    value:-7
  },
  {
    name: "30天",
    value:-30
  }
])

const ChartRef=ref(null);
let myChart

const dataList=ref([]);

const selectArr = ref([dayjs().add(tab2.value[activeTab2.value].value,'day').format('YYYY-MM-DD'),dayjs().format('YYYY-MM-DD')])

const queryParams=ref({
  startDate:selectArr.value[0],
  endDate:selectArr.value[1],
})

const initChart=()=>{
  myChart = echarts.init(ChartRef.value);
  let opt = deepCopy(option);
  if(activeTab1.value == 0){
    opt.xAxis[0].data = dataList.value.map(item=>{
      return item.thatdayDate
    })

  }else{
    opt.xAxis[0].data = dataList.value.map(item=>{
      return item.createName
    })





  }

  opt.series[0].data = dataList.value.map(item=>{
    return item.orderCount || 0
  })

  opt.series[1].data = dataList.value.map(item=>{
    return item.adRoi || 0
  })



  option && myChart.setOption(opt);
}

const initResize=()=>{
  window.onresize=()=>{
    myChart&&myChart.resize();
  }
}



const handleBtnClick = e => {
  let type = e.type;
  try {
    fn[type](e)
  } catch (e) {
    console.log(`${type}不存在`)
  }
}

const fn = {
  tab1({index}) {
    if (activeTab1.value != index) {
      activeTab1.value = index;
      queryData();
    }
  },
  tab2({index}) {
    if (activeTab2.value != index) {
      activeTab2.value = index;
      //queryData();

       selectArr.value=[dayjs().add(tab2.value[activeTab2.value].value,'day').format('YYYY-MM-DD'),dayjs().format('YYYY-MM-DD')]
      queryParams.value = {
        startDate:selectArr.value[0],
        endDate:selectArr.value[1],
      }
      queryData();

    }
  }
}


const queryData = async () => {
  if (activeTab1.value == 0) {
    let res = await getAnalysisByTime(queryParams.value);
    dataList.value = res || [];
  } else {
    let res = await getAnalysisByUser(queryParams.value);
    dataList.value = res || [];
  }
  initChart();
}


const onChange=e=>{
  queryParams.value = {
    startDate:selectArr.value[0],
    endDate:selectArr.value[1],
  }
  queryData();
}


onMounted(()=>{


  initResize();

  queryData();
})

</script>
<style lang="scss" scoped>
.module-li {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.4);

}

:deep(.el-card__body) {
  padding: 0;
}

.tab {
  .tab-li {
    border: solid 1px #E4E4E4;
    color: #666666;
    background: #FAFAFA;
    padding: 0 20px;
    height: 36px;

    &:nth-of-type(1) {
      border-radius: 8px 0 0 8px;
    }


    &:nth-last-of-type(1) {
      border-left: solid 1px rgba(0, 0, 0, 0);
      border-radius: 0 8px 8px 0;
    }


    &.active {
      border: solid 1px #3721FF;
      color: #3721FF;
      background: #EFEEFF;
    }

  }

}
</style>
